// 游戏配置
const config = {
    gridSize: 20,      // 网格大小
    speed: 150,        // 游戏速度（毫秒）
    initialSnakeLength: 3  // 初始蛇的长度
};

// 游戏状态
let canvas, ctx;
let snake = [];
let food = {};
let direction = 'right';
let nextDirection = 'right';
let gameRunning = false;
let gameLoop;
let score = 0;

// DOM元素
let scoreElement;
let startButton;

// 初始化游戏
window.onload = function() {
    canvas = document.getElementById('game-canvas');
    ctx = canvas.getContext('2d');
    scoreElement = document.getElementById('score');
    startButton = document.getElementById('start-btn');
    
    // 添加事件监听器
    startButton.addEventListener('click', toggleGame);
    document.addEventListener('keydown', handleKeyPress);
    
    // 初始绘制
    drawGrid();
    drawMessage('按"开始游戏"按钮开始');
};

// 切换游戏状态（开始/暂停）
function toggleGame() {
    if (gameRunning) {
        // 暂停游戏
        clearInterval(gameLoop);
        gameRunning = false;
        startButton.textContent = '继续游戏';
        drawMessage('游戏暂停');
    } else {
        // 如果蛇不存在，初始化游戏
        if (snake.length === 0) {
            initGame();
        }
        // 开始游戏循环
        gameRunning = true;
        startButton.textContent = '暂停游戏';
        gameLoop = setInterval(gameStep, config.speed);
    }
}

// 初始化游戏
function initGame() {
    // 重置游戏状态
    snake = [];
    direction = 'right';
    nextDirection = 'right';
    score = 0;
    scoreElement.textContent = score;
    
    // 创建蛇
    const centerX = Math.floor(canvas.width / (2 * config.gridSize));
    const centerY = Math.floor(canvas.height / (2 * config.gridSize));
    
    for (let i = 0; i < config.initialSnakeLength; i++) {
        snake.push({x: centerX - i, y: centerY});
    }
    
    // 生成食物
    generateFood();
    
    // 绘制游戏
    drawGame();
}

// 游戏步骤
function gameStep() {
    // 更新方向
    direction = nextDirection;
    
    // 移动蛇
    const head = {x: snake[0].x, y: snake[0].y};
    
    // 根据方向移动头部
    switch(direction) {
        case 'up': head.y--; break;
        case 'down': head.y++; break;
        case 'left': head.x--; break;
        case 'right': head.x++; break;
    }
    
    // 检查碰撞
    if (checkCollision(head)) {
        gameOver();
        return;
    }
    
    // 添加新头部
    snake.unshift(head);
    
    // 检查是否吃到食物
    if (head.x === food.x && head.y === food.y) {
        // 增加分数
        score += 10;
        scoreElement.textContent = score;
        
        // 生成新食物
        generateFood();
    } else {
        // 如果没吃到食物，移除尾部
        snake.pop();
    }
    
    // 绘制游戏
    drawGame();
}

// 检查碰撞
function checkCollision(head) {
    // 检查墙壁碰撞
    if (head.x < 0 || head.y < 0 || 
        head.x >= canvas.width / config.gridSize || 
        head.y >= canvas.height / config.gridSize) {
        return true;
    }
    
    // 检查自身碰撞
    for (let i = 0; i < snake.length; i++) {
        if (snake[i].x === head.x && snake[i].y === head.y) {
            return true;
        }
    }
    
    return false;
}

// 游戏结束
function gameOver() {
    clearInterval(gameLoop);
    gameRunning = false;
    startButton.textContent = '重新开始';
    drawMessage('游戏结束！');
}

// 生成食物
function generateFood() {
    const gridWidth = canvas.width / config.gridSize;
    const gridHeight = canvas.height / config.gridSize;
    
    // 随机生成食物位置
    let foodPosition;
    let validPosition = false;
    
    while (!validPosition) {
        foodPosition = {
            x: Math.floor(Math.random() * gridWidth),
            y: Math.floor(Math.random() * gridHeight)
        };
        
        // 确保食物不会出现在蛇身上
        validPosition = true;
        for (let i = 0; i < snake.length; i++) {
            if (snake[i].x === foodPosition.x && snake[i].y === foodPosition.y) {
                validPosition = false;
                break;
            }
        }
    }
    
    food = foodPosition;
}

// 处理键盘输入
function handleKeyPress(event) {
    // 防止方向键滚动页面
    if ([37, 38, 39, 40, 65, 87, 68, 83].includes(event.keyCode)) {
        event.preventDefault();
    }
    
    // 根据按键设置下一个方向
    switch(event.keyCode) {
        // 上: 箭头上 或 W
        case 38:
        case 87:
            if (direction !== 'down') nextDirection = 'up';
            break;
        // 下: 箭头下 或 S
        case 40:
        case 83:
            if (direction !== 'up') nextDirection = 'down';
            break;
        // 左: 箭头左 或 A
        case 37:
        case 65:
            if (direction !== 'right') nextDirection = 'left';
            break;
        // 右: 箭头右 或 D
        case 39:
        case 68:
            if (direction !== 'left') nextDirection = 'right';
            break;
        // 空格: 开始/暂停游戏
        case 32:
            toggleGame();
            break;
    }
}

// 绘制游戏
function drawGame() {
    // 清除画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // 绘制网格
    drawGrid();
    
    // 绘制食物
    ctx.fillStyle = '#FF0000';
    ctx.fillRect(
        food.x * config.gridSize, 
        food.y * config.gridSize, 
        config.gridSize, 
        config.gridSize
    );
    
    // 绘制蛇
    for (let i = 0; i < snake.length; i++) {
        // 头部使用深绿色，身体使用绿色
        ctx.fillStyle = i === 0 ? '#006400' : '#32CD32';
        ctx.fillRect(
            snake[i].x * config.gridSize, 
            snake[i].y * config.gridSize, 
            config.gridSize, 
            config.gridSize
        );
        
        // 添加边框使蛇的各部分更容易区分
        ctx.strokeStyle = '#003300';
        ctx.strokeRect(
            snake[i].x * config.gridSize, 
            snake[i].y * config.gridSize, 
            config.gridSize, 
            config.gridSize
        );
    }
}

// 绘制网格
function drawGrid() {
    ctx.strokeStyle = '#CCCCCC';
    ctx.lineWidth = 0.5;
    
    // 绘制垂直线
    for (let x = 0; x <= canvas.width; x += config.gridSize) {
        ctx.beginPath();
        ctx.moveTo(x, 0);
        ctx.lineTo(x, canvas.height);
        ctx.stroke();
    }
    
    // 绘制水平线
    for (let y = 0; y <= canvas.height; y += config.gridSize) {
        ctx.beginPath();
        ctx.moveTo(0, y);
        ctx.lineTo(canvas.width, y);
        ctx.stroke();
    }
}

// 在画布上绘制消息
function drawMessage(message) {
    ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    ctx.font = '20px Arial';
    ctx.fillStyle = 'white';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(message, canvas.width / 2, canvas.height / 2);
}